<template>
  <!-- 按钮  可设置宽高 -->
  <div class="btn-content" v-shrink-on-click>
    <!-- <ImgT src="/imgs/myDiscounts/submitBtn.webp" alt="" /> -->
    <div class="submit">
      <slot></slot>
    </div>
  </div>

</template>

<script setup lang='ts'>
import { ref } from 'vue'
const props = defineProps({
  height: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: ''
  },
  fontSize: {
    type: String,
    default: '14px'
  },
})

let height = ref(props.height);
let width = ref(props.width);
let fontSize = ref(props.fontSize);

</script>

<style lang='scss' scoped>
.btn-content {
  position: relative;
  display: inline-block;
  height: v-bind(height);
  width: v-bind(width);
  background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
  border-radius: 8px;

  // 灰色按钮 公共样式  
  &.gray {
    background: #282747;
    box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
    color: #FFFFFF;
  }

  // 橙色色按钮 公共样式  
  &.orange {
    color: #FFFFFF;
    background: linear-gradient(180deg, #EC6F01 0%, #EC8C01 100%);
    box-shadow: 0.5px 0.5px 1px 0px #FFB855 inset;
  }

  img {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 10;
  }

  .submit {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50%;
    width: v-bind(width);
    text-align: center;
    transform: translate(-50%, -50%);
    font-size: v-bind(fontSize);
    color: #ffffff;
    text-wrap: wrap;
    word-wrap: break-word;
    /* 允许单词换行 */
    overflow-wrap: break-word;
  }



}
</style>